<template>
	<view class="my-work">
		<van-dialog id="van-dialog"></van-dialog>
		<view class="hint">注: 资料越完善,找活越容易</view>
		<view class="module-name">
			<span class="name">姓名</span>
			<span style="margin-right: 10rpx;">:</span>
			<input type="text" v-model="name" />
		</view>
		<picker @change="bindPickerChange" :value="sexIndex" :range="columns">
			<view class="module-sex">
				<span class="name">性别</span>
				<span style="margin-right: 10rpx;">:</span>
				<span>{{sex}}</span>
			</view>
		</picker>
		<view @click="onShowDatePicker" class="module-date">
			<span class="name">出生日期</span>
			<span style="margin-right: 10rpx;">:</span>
			<span>{{currentDate}}</span>
		</view>
		
		<mx-date-picker :show="showPicker" :type="rangeTime" :value="value" :show-tips="true"
		 :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
		<view @click="showPopup" class="module-nation">
			<span class="name">民族</span>
			<span style="margin-right: 10rpx;">:</span>
			<span>{{nation}}</span>
			<u-popup mode="right" ref="popupTree" width="40%" z-index="1075">
				<view class="tree">
					<view class="title">请选择民族</view>
					<view v-for="(item,index) in nationArray" :key="index">
						<view class="province" @click="checkCity(item)">{{item}}</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="module-type">
			<view @click="showPopupType">
				<span class="name">所属工种</span>
				<span style="margin-right: 10rpx;">:</span>
				<view style="display: inline-block;">
					<view v-for="(re,temp) in result" :key="temp">
						<view>
							{{ re }}
						</view>
					</view>
				</view>
			</view>

			<van-dialog use-slot :show="showType" :show-cancel-button="true" @cancel="cancel" @confirm="enter">
				<view class="type">
					<view class="type-title">请选择,最多选三个</view>
					<van-checkbox-group v-model="result" :max="3">
						<view v-for="(item,index) in typeArray" :key="index">
							<view class="type-category">
								<view>{{item.name}}</view>
								<view v-for="(t,flag) in item.type" :key="flag">
									<van-checkbox shape="square" :name="t" class="type-province">
										{{t}}
									</van-checkbox>
								</view>
							</view>
						</view>
					</van-checkbox-group>
				</view>
			</van-dialog>
		</view>
		<view class="module-map">
			<view @click="goMap" class="address">
				<span class="name">期望地区</span>
				<span style="margin-right: 10rpx;">:</span>
				<span class="addressName">{{addressName}}</span>
			</view>
			<view @click="getRegeo" class="location" style="color: #007AFF;
				padding-left: 20rpx;border-left: solid 1px #D0DEE5;">获取定位</view>
		</view>
		<view class="module-phone">
			<span class="name">手机号码</span>
			<span style="margin-right: 10rpx;">:</span>
			<input type="number" v-model="phone" maxlength="11" />
		</view>
		<view class="module-introduce">
			<view class="head">自我介绍</view>
			<textarea @input="numberWords" placeholder="请简要介绍您所从事的行业以及工作经验" v-model="introduce" maxlength="500" class="introduce-text"></textarea>
			<view class="text-num">{{num}}/500</view>
		</view>
		<view class="save">
			<view class="save-message">
				保存资料
			</view>
		</view>
	</view>
</template>

<script>
	import Dialog from '../../../wxcomponents/vant-weapp/dialog/dialog'
	import MxDatePicker from "../../../components/mx-datepicker/mx-datepicker.vue";
	import Toast from '../../../wxcomponents/vant-weapp/toast/toast';
	import vanCheckboxGroup from '../../../wxcomponents/vant-weapp/checkbox-group/index'
	import vanCheckbox from '../../../wxcomponents/vant-weapp/checkbox/index'
	import amap from '../../../libs/amap-wx.js'
	export default {
		data() {
			return {
				sex: "",
				name: "",
				columns: ['男', '女'],
				show: false,
				time: "",
				showPicker: false,
				rangeTime: '15:00:12',
				currentDate:"",
				value: '',
				showType: true,
				nation: "",
				type: "",
				sexIndex: 0,
				num: 0,
				phone: "",
				addressName: "",
				result: new Array(3),
				newResult: [],
				introduce: "",
				amapPlugin:null,
				weather: {
					hasData: false,
					data: []
				},
				key: "1eb56d8bee5c50467bd6f6bdbe8cacc6",
				nationArray: ["汉族", "蒙古族", "回族", "藏族", "维吾尔族"],
				typeArray: [{
						name: "通用工种",
						type: ["建筑木工/铝模/模板",
							"装修木工/工厂木工/吊顶",
							"焊工/铆工/钣金/钳工",
							"钢筋工/铁工"
						]
					},
					{
						name: "机械操作工/司机",
						type: ["塔吊/吊车/指挥/维修"]
					}
				],
			}
		},
		components: {
			'MxDatePicker': MxDatePicker,
			'vanCheckboxGroup': vanCheckboxGroup,
			'vanCheckbox': vanCheckbox
		},
		onLoad() {
			debugger
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
		},
		methods: {
			bindPickerChange(e) {
				this.sex = this.columns[e.target.value]
			},
			checkDatime() {
				this.$refs.popupDate.open();
			},
			showPopup() {
				this.$refs.popupTree.open();
			},
			showPopupType() {
				this.newResult = this.result
				this.showType = true;
			},
			checkCity(name) {
				this.nation = name
			},
			checkType(name) {
				this.type = name
			},
			confirm() {
			},
			numberWords() {
				this.num = this.introduce.length
			},
			cancel() {
				this.result = this.newResult
				this.newResult = []
				this.showType = false
			},
			enter() {
				this.newResult = []
				this.showType = false
			},
			addResult(name) {
				if (this.result.length > 0) {
					if (this.result.length < 3 && this.result.indexOf(name) == -1) {
						this.result.push(name)
					} else if (this.result.indexOf(name) != -1) {
						this.result.splice(this.result.indexOf(name), 1)
					} else if (this.result.length > 3) {
						console.info("最多添加3个")
					}
				} else {
					this.result.push(name)
				}

			},
			getRegeo() {
				uni.showLoading({
					title: '获取信息中'
				});
				this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data)
						this.addressName = data[0].name;
						uni.hideLoading();
					}
				});
			},
			getLocationInfo() {
				uni.getLocation({
					type: 'wgs84',
					// geocode:true,
					altitude: true,
					success(res) {
						console.log(res, "当前位置");
						self.latitude = res.latitude;
						self.longitude = res.longitude;
						console.info(res.toString())
					}

				});
			},
			onShowDatePicker() { //显示
				this.showPicker = true;
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				this.value = year + "-" + month + "-" + day
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this.currentDate = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.my-work {
		background: #cecece;
		position: relative;

		.hint {
			background: #FFFFFF;
			width: 100vw;
			text-align: center;
			line-height: 80rpx;
			color: #ED6A0C;
			margin-bottom: 20rpx;
		}

		.module-name,
		.module-sex,
		.module-date,
		.module-nation,
		.module-type,
		.module-map,
		.module-phone {
			width: 100vw;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 0 20rpx 20rpx;
			border-bottom: solid 1px #d8d8d8;
			background: #FFFFFF;

			.name {
				display: inline-block;
				width: 160rpx;
				text-align-last: justify;
			}
		}

		.module-phone {
			margin: 20rpx 0;
		}

		.module-map {
			justify-content: space-between;
			padding-right: 20rpx;

			.addressName {
				width: 300rpx;
			}
		}

		.module-introduce {
			background: #FFFFFF;
			padding: 20rpx;
			font-size: 30rpx;
			border: solid 1px #d9d9d9;
			position: relative;

			.introduce-text {
				margin-top: 20rpx;
				margin-bottom: 120rpx;
			}

			.text-num {
				position: absolute;
				right: 40rpx;
				top: 376rpx;
			}
		}

		.type {
			height: 700rpx;
			padding: 20rpx;
			overflow-y: auto;

			.type-title {
				text-align: center;
				color: #ff0000;
				margin-bottom: 50rpx;
			}

			.type-province {
				margin-left: 20rpx;
			}
		}

		.tree {
			.title {
				font-size: 38rpx;
				font-weight: bold;
				padding: 20rpx 20rpx 20rpx 30rpx;
				background: #DCDEE0;
			}

			.classTitle {
				background: #DCDEE0;
			}

			.province {
				display: flex;
				border-bottom: solid 1px #999999;
				padding: 20rpx 20rpx 20rpx 40rpx;
			}
		}

		.save {
			width: 100vw;
			text-align: center;
			position: fixed;
			bottom: 0;
			right: -6rpx;
			background: #cecece;
			padding: 20rpx 30rpx;

			.save-message {
				width: 90vw;
				background: #007AFF;
				color: #FFFFFF;
				font-size: 32rpx;
				padding: 14rpx 120rpx;
				border-radius: 16rpx;
			}
		}
	}
</style>
